import { useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import instance from "../axios/index";



function Guanli() {
    const navigate = useNavigate();
    const [useName, setUseName] = useState({})


    const yibuFetcher = async () => {
        const id = sessionStorage.getItem('id')
        const { data: { code, data } } = await instance({ url: `/my/getUseName?id=${id}` })
        if (code === 200) {
            console.log(data,'ssssss');
            
            setUseName(data)
        }
    }
    useEffect(() => {
        yibuFetcher()
    }, [])

    const tuichu = () => {
        localStorage.removeItem('accessToken');
        localStorage.removeItem('refreshToken');
        navigate('/login');
    }
    return (<>
        <div className='backColor' style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div onClick={() => navigate('/my')}>
                <img src='/iconfont/my/左.png' alt="search" style={{ width: '20px', height: '20px' }} />
            </div>
            <div>
                <h2>账号管理</h2>
            </div>
            <div>
                ···
            </div>
        </div>
        <div style={{ marginTop: '30px' }}>
            {useName.member?<div><p onClick={() => navigate('/usemodify')} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <h3>修改个人信息</h3>
                <p><img src='/iconfont/my/左.png' alt="search" style={{ width: '20px', height: '20px', transform: 'rotate(180deg)' }} /></p>
            </p>
            <p><h3>会员开通时间：{useName.datetime}</h3></p></div>
            :<p>
                <h3 style={{textAlign:'center'}}>你不是会员无法修改个人信息，请去冲个会员先</h3>
            </p>}
        </div>
        <div style={{ height: '100px' }}>
            <button className='Gouwu writhColor' onClick={() => tuichu()}>退出登录</button>
        </div>
    </>)
}

export default Guanli;